import {goods} from "../goods.js";
import {productMessages} from "../goods.js";
import {Render as nationalDayRender,afterRender as nationalDayafterRender} from "./nationalDayevent-page.js";
import {Render as CouponCollectionRender,afterRender as CouponCollectionAfterRender} from "./product-CouponCollection-page.js";
import {Render as bigImgRender,afterRender as bigImgAfterRender} from "./product-bigImg-page.js";
import {Render as serviceRender,afterRender as serviceAfterRender} from "./product-service-page.js";
import {Render as parameterRender,afterRender as parameterAfterRender} from "./product-Parameter-page.js";
import {Render as buycarRender,afterRender as buycarAfterRender} from "./product-buycar-page.js";


export let name = 'goods';
export function Render(){
    return`
    <style>
    .goods-page{
    width: 100%;
    overflow: auto;
    }
    .goods-page .goods-img{
    width: 100%;
    background-color: white;
    }
    .goods-page .goods-img img{
    width: 100%;
    }
    
    .goods-main{
    width: 96%;
    background-color: white;
    margin-top: 1rem;
    border-radius: 1rem;
    margin-left: 2%;
    padding-bottom: 4rem;
    }
    .goods-main .goods-price{
    width: 100%;
    color: red;
    font-size: 3rem;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    }
    .goods-main .goods-price span:nth-child(1){
    font-size: 4.5rem;
    }
    .goods-main .goods-price span:nth-child(2){
    font-size: 2rem;
    color: #ccc;
    display: block;
    float: right;
    margin-top: 1rem;
    margin-right: 1rem;
    }
    .goods-main .goods-minititle{
    width: 100%;
    color: #2aae67;
    font-size: 2rem;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    }
    .goods-main .goods-minititle span:nth-child(2){
    display: block;
    float: right;
    margin-right: 1rem;
    }
    .goods-main .goods-text{
    width: 100%;
    padding: 1.5rem 1.5rem 0 1.5rem;
    font-size: 2.5rem;
    line-height: 3.5rem;
    font-weight: 700;
    }
    .goods-main .goods-title{
    width: 100%;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    font-size: 2.4rem;
    color: #999;
    }
    
    .goods-guarantee{
    width: 96%;
    margin-left: 2%;
    background-color: white;
    margin-top: 1.5rem;
    padding: 1.5rem 0;
    }
        /* 外层容器 */
    .goods-guarantee .item-box {
      background-color: #fff; 
      padding: 1rem; 
    }
    /* 单个条目样式 */
    .goods-guarantee .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0; 
      border-bottom: 1px solid #f2f2f2; 
    }
    /* 标签样式（保障、参数） */
    .goods-guarantee .label {
      font-size: 2.2rem; 
      color: #666; 
      margin: 0 2rem; 
    }
    /* 内容文本样式 */
    .goods-guarantee .text {
      flex: 1; 
      font-size: 2.4rem;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis; 
      white-space: nowrap; 
      padding-right: 3rem;
    }
    /* 箭头样式 */
    .goods-guarantee .arrow {
      font-size: 2.5rem;
      color: #999; 
      margin: 0 1rem; 
    } 
    
            /* 评价模块外层容器 */
        .review-box {
          border: 0.1rem solid #eee;
          border-radius: 1rem; 
          padding: 1.5rem; 
          background-color: white;
          width: 96%;
          margin-left: 2%;
          margin-top: 1.5rem;
        }
        /* 评价头部（标题 + 查看全部） */
        .review-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .review-title {
          font-size: 2.5rem;
          color: #333;
          font-weight: bold;
        }
        .view-all {
          font-size: 2rem;
          color: #00cc66; 
          text-decoration: none;
        }
        /* 单个评价条目 */
        .review-item {
          margin: 2.3rem 0;
        }
        /* 用户信息行（头像 + 用户名 + 星级） */
        .user-info {
          display: flex;
          align-items: center;
          margin-bottom: 1rem;
        }
        .avatar {
          width:  4rem;
          height: 4rem;
          border-radius: 50%; /* 圆形头像 */
          margin-right: 1rem;
        }
        .user-name {
          font-size: 2rem;
          color: #333;
          margin-right: 1rem;
        }
        /* 星级样式 */
        .stars {
          display: flex;
        }
        .star {
          font-size: 2.5rem;
          color: rgb(255, 140, 40);
          margin-right: 1rem;
        }
        /* 评价文本 */
        .review-text {
          font-size: 2rem;
          color: #666;
          margin: 0;
        }
    
    .goods-detail{
          background-color: white;
          width: 96%;
          margin-left: 2%;
          margin-top: 1.5rem;
          border-radius: 1rem;
          font-size: 3rem;
          margin-bottom: 10rem;
    }
    .goods-detail .detailPublic{
    width: 100%;
    height: 20rem;
    }
    
    /*底部栏*/
    
    .action-bar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #fff;
      border-top: 0.1rem solid #f2f2f2; 
      padding: 1rem 1rem;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 2rem; 
      cursor: pointer;
    }
    .icon {
      width: 3.5rem; 
      height:3.5rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin: 0 1rem;
    }
    /* 示例图标，实际项目中替换为真实图标地址（如 iconfont 或本地图片） */
    .star-icon {
      background-image: url("../../../imgs/collect_0.png");
    }
    .service-icon {
      background-image: url("../../../imgs/message.png");
    }
    .share-icon {
      background-image: url("../../../imgs/share.png");
    }
    .text {
      font-size: 1.5rem; 
      color: #333;
    }
    .btn {
      display: inline-block;
      padding:1rem 1rem; 
      border: none;
      border-radius: 1rem; 
      font-size: 2.5rem; 
      cursor: pointer;
      margin-left: 2rem;
    }
    .cart-btn {
      background-color: #fff;
      color: #00cc66;
      border: 1px solid #00cc66;
      margin-left: 7rem;
    }
    .buy-btn {
      background-color: #00cc66;
      color: #fff;
    }
    /* 交互态，可选 */
    .icon-item:active,
    .btn:active {
      opacity: 0.8;
      transform: scale(0.98);
    }
    
    .quitBtn{
    width: 6rem;
    height: 6rem;
    position: fixed;
    top: 3rem;
    left: 2rem;
    font-size: 2rem;
    border-radius: 6rem;
    background-color: #fff;
    border: 0.1rem solid #333;
    }
    </style>
    <div class="goods-page">
        <div class="goods-img">
        </div>
        ${bigImgRender()}
        <div class="goods-main">
        </div>
<!--        保障-->
        <div class="goods-guarantee">
              <div class="item goods-guarantee-one">
                <span class="label">保障</span>
                <span class="text">正品保障 · 7天无理由退换 · 退货运费险 · 极速退款</span>
                <i class="arrow">></i>
              </div>
              <div class="item parameter">
                <span class="label">参数</span>
                <span class="text"></span>
                <i class="arrow">></i>
              </div>
        </div>
        
<!--        评价-->
        <div class="review-box">
          <div class="review-header"></div>
          <div class="review-item"></div>
        </div>
        
<!--        详情-->
        <div class="goods-detail">
        <span class="detail-title">详情</span>
        <div class="detailPublic"></div>
        </div>
    </div>
    ${parameterRender()}
<!--    底部栏-->
    <div class="action-bar">
      <span class="icon-item" title="收藏">
        <i class="icon star-icon" data-state = "false"></i>
        <span class="text">收藏</span>
      </span>
      <span class="icon-item" title="客服">
        <i class="icon service-icon"></i>
        <span class="text">客服</span>
      </span>
      <span class="icon-item" title="分享">
        <i class="icon share-icon"></i>
        <span class="text">分享</span>
      </span>
      <button class="btn cart-btn">加入购物车</button>
      <button class="btn buy-btn">立即购买</button>
    </div>
   <!--    国庆页面-->
   ${nationalDayRender()}
<!--领券页面-->
   ${CouponCollectionRender()}

<!--点击退出到首页-->
<input type="button" class="quitBtn" value="<退出" data-hash = "/">

<!--服务保障页面-->
${serviceRender()} 
<!--参数页面-->
<div class="parameterpage" style="display: none">
    <div class="backGround"></div>
    <div class="parameterContent">
        <h1>产品参数</h1>
        <ul>
            
        </ul>
    </div>
    <div class="btns"><input type="button" value="确定" class="parameter-btn"></div>
    
</div>
<!--加入购物车/购买页面-->
${buycarRender()}

    `;

}

export function afterRender() {
//商品详情页显示的时候,底部导航栏隐藏
    let bottomNav = document.querySelector(".bottomNav");
    bottomNav.style.display = "none";
    let quitBtn = document.querySelector(".quitBtn");
    let path = quitBtn.getAttribute("data-hash");
    quitBtn.addEventListener("click", function () {
        location.hash = path;
        bottomNav.style.display = "block";
    })

/*=================================动态渲染页面内容===========================================*/
    let hash = location.hash.slice(1);
    //动态渲染商品信息
    let productImg = document.querySelector(".goods-img");
    productImg.innerHTML = `
    <img src = "${productMessages[hash].src}" >
    `;
    let bigImg = document.querySelector(".bigImg");
    bigImg.innerHTML = `
       <div class="backGround"></div>
       <div class="imgSrc"><img src="${productMessages[hash].src}"/></div>
       <div class="backGround"></div>
    `
    let goodsMain = document.querySelector(".goods-main");
    goodsMain.innerHTML =  `
        <div class="goods-price">￥<span>${productMessages[hash].price}</span><span>已售${productMessages[hash].soldNumber}</span></div>
        <div class="goods-minititle"><span class="activityBtn">国庆</span><span class="getpriceBtn">领券></span></div>
        <p class="goods-text">${productMessages[hash].text}</p>
        <p class="goods-title">${productMessages[hash].miniTitle}</p>
    `
    //渲染评价内容
    let reviewHeader =  document.querySelector(".review-header");
    let reviewBox = document.querySelector(".review-box");
    let commendnum  = productMessages[hash].commend || [];

    reviewHeader.innerHTML = `
        <span class="review-title">评价 ${commendnum.length}</span>
        <a href="javascript:;" class="view-all">查看全部></a>
    `;
    if(productMessages[hash].commend !== null){
        productMessages[hash].commend.forEach(function (commendObj){
            let commendText = commendObj.conmmendContent || "客户默认给出好评~";
            let reviewItem = document.createElement("div");
            reviewItem.classList.add('review-item');
            reviewItem.innerHTML = `
            <div class="user-info">
                 <img src="${commendObj.userAvatar}" alt="用户头像" class="avatar">
                 <span class="user-name"> ${commendObj.userName} </span>
                 <div class="stars"></div>
             </div>
             <p class="review-text"> ${commendText} </p>
        `;

        reviewBox.appendChild(reviewItem);
        let  stars = document.querySelector(".stars");
        for (let i = 0; i <  `${commendObj.starNumber}`; i++) {
            let i = document.createElement("i");
            i.className = 'bi bi-star star';
            stars.appendChild(i);
        }
        })
    }
//点击国庆弹出营销活动
nationalDayafterRender();

//点击领券弹出优惠券页面
CouponCollectionAfterRender();

//点击保障弹出服务保障页面,以及点确定关闭
    serviceAfterRender();
//收藏点击事件
    let starIcon = document.querySelector(".star-icon");
    let text = document.querySelector(".icon-item .text");
    starIcon.addEventListener("click", function () {
        let state = starIcon.getAttribute("data-state");
        if (state === "false") {//没有被收藏
            starIcon.style.backgroundImage = 'url("../../../imgs/collect_1.png")';
            text.innerHTML = "已收藏";
            starIcon.setAttribute("data-state", "true");
        } else {//已收藏 再次点击取消收藏
            starIcon.style.backgroundImage = 'url("../../../imgs/collect_0.png")';
            text.innerHTML = "收藏";
            starIcon.setAttribute("data-state", "false");
        }
    })

//参数详情页面的显示和隐藏
    parameterAfterRender();

//点击图片放大商品图片
    bigImgAfterRender();
//点击购物车/购买 显示购买页面
    buycarAfterRender();
//点击查看全部跳转到评论页面
    let viewAll = document.querySelector(".view-all");
    viewAll.addEventListener("click", function () {
        location.hash = "/goods/commend";
    })
}
